<template>
	<view class="sign-log">
		<view class="sign-list" v-if="signActivityList && signActivityList.length > 0">
			<view class="list" v-for="(item,index) in signActivityList" :title="item.name">
				<view class="title">
					<view class="name"> {{ item.activityName }}</view>
					<view class="tag">
						<u-button :type="item.type == '已结束' ?'error' : item.type == '进行中' ? 'primary' :'warning' "
							size="mini">{{ item.type }}</u-button>
					</view>
				</view>
				<view class="time">
					<span>报名时间：{{item.createdAt}}</span>
				</view>
				<view class="time">
					活动开始时间：{{item.activityStartDate}}
				</view>
				<view class="time">
					活动结束时间：{{item.activityEndDate}}
					<span style="color: #f56c6c;">{{item.money == 0 ? '免费活动' : item.money + '元'}}</span>
				</view>

			</view>
		</view>
		<u-empty v-else text="没有已报的活动" marginTop="180" icon="http://cdn.uviewui.com/uview/empty/news.png">
		</u-empty>
	</view>
</template>


<script>
	import {
		findSignActivityList
	} from '@/api/signProject.js'

	export default {
		data() {
			return {
				signActivityList: []
			};
		},
		onShow() {
			this.signActivityList = []
			this.getfindSignActivityList()
		},

		methods: {
			async getfindSignActivityList() {
				let res = await findSignActivityList({
					PageIndex: 1,
					PageSize: 999
				})
				res.items && res.items.map(v => {
					v.activityDate = v.activityStartDate + '    至   ' + v.activityEndDate,
						v.type = this.getTimeStatus(v.activityStartDate, v.activityEndDate)
				})
				this.signActivityList = res.items
			},

			//  获取活动时间段状态
			getTimeStatus(startTime, endTime) {
				// 将输入的时间字符串转换为Date对象
				const startDate = new Date(startTime);
				const endDate = new Date(endTime);
				// 获取当前时间
				const now = new Date();

				// 检查当前时间是否在开始时间和结束时间之间
				if (now >= startDate && now <= endDate) {
					return "进行中";
				}
				// 检查当前时间是否超过了结束时间
				else if (now > endDate) {
					return "已结束";
				}
				// 如果当前时间小于开始时间，则表示还未开始
				else {
					return "未开始";
				}
			},
		},

	}
</script>

<style lang="scss" scoped>
	.sign-log {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		background-color: #F2F1F6;

		.list {
			background-color: #fff;
			margin: 20rpx;
			padding: 30rpx;
			border-radius: 20rpx;

			.title {
				display: flex;
				align-items: center;
				font-size: 36rpx;
				font-weight: 700;

				.name {
					width: 600rpx;
					white-space: nowrap;
					/* 确保文本不会换行 */
					overflow: hidden;
					/* 隐藏超出容器宽度的内容 */
					text-overflow: ellipsis;
					/* 当文本溢出时显示省略号 */
				}

				.tag {
					margin-left: 20rpx;
				}
			}

			.time,
			.price {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #757678;
				margin-top: 20rpx;
				font-size: 26rpx
			}

		}


	}
</style>